<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="技师姓名" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入技师姓名" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="技师电话" prop="phonenumber">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入技师电话" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="技师出生年月日" prop="birthdayData">
        <el-date-picker @change="birthdayDataChange" v-model="birthdayData" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select multiple v-model="queryParams.sex" placeholder="请选择性别">
          <el-option v-for="contract in sexArray" :key="contract.dictValue" :label="contract.dictLabel"
            :value="contract.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在城市" prop="areaId">
        <el-select multiple v-model="queryParams.areaId" placeholder="请选择所在城市">
          <el-option v-for="contract in areaNameArray" :key="contract.id" :label="contract.areaName"
            :value="contract.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否在线" prop="workable">
        <el-select clearable v-model="queryParams.workable" placeholder="请选择服务状态">
          <el-option key="1" label="在线" value="1"></el-option>
          <el-option key="0" label="不在线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['admin:jishi:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleEdit" v-hasPermi="['admin:jishi:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="single" @click="handleDel" v-hasPermi="['admin:jishi:edit']">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="tabList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="技师工号" align="center" prop="jobNumber"/>
      <el-table-column label="技师名字" align="center" prop="realName" />
      <el-table-column label="技师昵称" align="center" prop="nickName" />
      <el-table-column label="技师电话" align="center" prop="phonenumber" />
      <el-table-column label="技师出生年月日" align="center" prop="birthday" />
      <el-table-column label="技师性别" align="center" prop="sex" :formatter="sexChange"/>
      <el-table-column label="技师照片" align="center" prop="liveImgurl">
        <template slot-scope="scope">
          <div @click="liveImgClick(scope.row)" class="colorMarking">点击查看</div>
        </template>
      </el-table-column>
      <el-table-column label="技师简介" align="center" prop="intro" >
        <template slot-scope="scope">
          <div @click="introClick(scope.row)" class="colorMarking">点击查看</div>
        </template>
      </el-table-column>
      <el-table-column label="所在城市" align="center" prop="areaName" />
      <el-table-column label="服务次数" align="center" prop="fuwuNum">
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.fuwuNum"  @input="e => fuwuNumInput(e, scope.$index)" 
            @change="e => fuwuNumChange(e, scope.$index, scope.row)" placeholder="请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="实名认证" align="center">
        <template slot-scope="scope">
          <div @click="handleEditReal(scope.row)" class="colorMarking">点击查看</div>
        </template>
      </el-table-column>
      <el-table-column label="银行卡信息" align="center" >
        <template slot-scope="scope">
          <div @click="handleEditBank(scope.row)" class="colorMarking">点击查看</div>
        </template>
      </el-table-column>
      <el-table-column label="所在位置" align="center" prop="addr" />
      <el-table-column label="服务管理" align="center" prop="userName" >
        <template slot-scope="scope">
          <div @click="projectClick(scope.row)" class="colorMarking">设置</div>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="adminRemark" >
        <template slot-scope="scope">
          <div @click="remarkClick(scope.row)" class="colorMarking">查看</div>
        </template>
      </el-table-column>
      <el-table-column label="技师服务状态" align="center" prop="workable">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.workable" active-value="1" inactive-value="0"
                @change="val=>changeWorkable(val,scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="全忙" align="center" prop="robotFlag">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.robotFlag" active-value="1" inactive-value="0"
                @change="val=>changeRobotFlag(val,scope.row)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 新增修改技师 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="技师姓名" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入技师姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="技师昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入技师昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="技师电话" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入技师电话" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="技师出生年月日" prop="birthday">
              <el-date-picker v-model="form.birthday" class="maxWidth" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="技师性别" prop="sex" >
              <el-select v-model="form.sex" placeholder="请选择技师性别" class="intWidth">
                <el-option v-for="contract in sexArray" :key="contract.dictValue" :label="contract.dictLabel" :value="contract.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="所在城市" prop="areaId" >
              <el-select v-model="form.areaId" placeholder="请选择所在城市" class="intMaxWidth" @change="handleCityChange($event)">
                <el-option v-for="contract in areaNameArray" :key="contract.id" :label="contract.areaName"
                  :value="contract.id" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="所在位置" prop="addr" >
              <el-autocomplete
                style="width: 575px;"
                class="inline-input"
                v-model="form.addr"
                value-key="formatted_address"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleAddrSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="技师简介" prop="intro">
              <el-input v-model="form.intro" type="textarea" :rows="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="技师照片" prop="workImg">
              <div class="uploadImage">
                工作照<span>（最大允许上传个数1张）</span>
                <div>
                  <!-- :before-remove="handleBeforeRemove" :before-remove="liveImgurlRemove"-->
                  <el-upload ref="upload" :action="uploadURL" :headers="headers" :data="dir" :file-list="workImgurlArray"
                    :on-success="imgSuccess" list-type="picture-card" :on-preview="handlePictureCardPreview" 
                    :on-remove="imgRemove" :before-upload="beforeUploadClick" :limit="1">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="liveImg">
              <div class="uploadImage">
                生活照<span>（最大允许上传个数6张）</span>
                <div>
                  <el-upload ref="upload" :action="uploadURL" :headers="headers" :data="dir" :file-list="liveImgurlArray"
                    :on-success="liveImgurlSuccess" list-type="picture-card" :on-preview="liveImgurlPreview" 
                    :on-remove="liveImgRemove" :before-upload="liveImgurlClick" :limit="6">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="picShow" title="技师照片">
      <el-image style="width: 100px; height: 100px;margin:0 10px 10px 0" :src="item"  v-for="(item,index) in srcList" :preview-src-list="srcList"> </el-image>
    </el-dialog>
    <!-- 查看技师简介 -->
    <el-dialog title="技师简介" :close-on-click-modal="false" :visible.sync="introduceOpen" width="500px" append-to-body >
      <div class="block">
        {{ followInfo }}
      </div>
      <div slot="footer" class="quesEditBtn">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存实名认证信息 -->
    <el-dialog title="实名认证信息" :close-on-click-modal="false" :visible.sync="realOpen" width="800px" append-to-body>
      <el-form ref="realform" :model="realform" :rules="realRules" label-width="120px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="身份证号" prop="idNumber">
              <el-input v-model="realform.idNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="身份证有效期" prop="limitDate">
              <el-date-picker v-model="idStartDate" type="date" value-format="yyyy-MM-dd" :picker-options="startPickerOptions" @focus="startDateFocus" /> 至
              <el-date-picker v-model="idLimitDate" type="date" value-format="yyyy-MM-dd" :picker-options="endPickerOptions" @focus="endDateFocus" />
              <!-- <el-date-picker v-model="idNumberDate" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker> -->
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="身份证正面" prop="idNumberPicF">
              <div class="uploadImage">
                身份证正面<span>（最大允许上传个数1张）</span>
                <div>
                  <el-upload ref="realUploadF" :action="uploadURL" :headers="headers" :data="dir" :file-list="idNumberPicF"
                    :on-success="realImgFSuccess" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="realFImgRemove" :before-upload="beforeUploadClick" :limit="1">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="身份证反面" prop="idNumberPicB">
              <div class="uploadImage">
                身份证反面<span>（最大允许上传个数1张）</span>
                <div>
                  <el-upload ref="realUploadB" :action="uploadURL" :headers="headers" :data="dir" :file-list="idNumberPicB"
                    :on-success="realImgBSuccess" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="realBImgRemove" :before-upload="beforeUploadClick" :limit="1">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="realSubmit">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存银行卡信息 -->
    <el-dialog title="银行卡信息" :close-on-click-modal="false" :visible.sync="bankOpen" width="800px" append-to-body>
      <el-form ref="bankform" :model="bankform" :rules="bankRules" label-width="120px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="姓名" prop="personName">
              <el-input v-model="bankform.personName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="开户行手机号" prop="openPhoneNumber">
              <el-input v-model="bankform.openPhoneNumber" placeholder="请输入开户行手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="身份证号" prop="idNumber">
              <el-input v-model="bankform.idNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="bankform.bankName" placeholder="请输入银行名称" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="开户支行" prop="branchBank">
              <el-input v-model="bankform.branchBank" placeholder="请输入开户支行" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="银行卡号" prop="cardNumber">
              <el-input v-model="bankform.cardNumber" placeholder="请输入银行卡号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bankSubmit">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 项目管理 -->
    <el-dialog :visible.sync="projectShow" title="项目管理" width="500px">
      <div class="popuplist" v-for="(item,index) in projectlist" :key="index">
        <div class="left">
            <img :src="item.projectImgurlSmall" alt="">
        </div>
        <div class="right">
          <div class="top">
            <div class="name">
              {{ item.projectName }}
            </div>
            <el-switch v-model="item.serviceAble" active-value="1" inactive-value="0"
              @change="val=>changeProkject(val,item)">
            </el-switch>
          </div>
          <div class="center">{{item.shichang}}分钟<div class="line">|</div>{{ item.projectFeature }}</div>
          <div class="money">¥ <span>{{ item.projectPrice }}</span></div>
        </div>
      </div>
      <div slot="footer" class="quesEditBtn">
        <el-button type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-dialog title="备注" :close-on-click-modal="false" :visible.sync="remarkShow" width="800px" append-to-body>
      <el-table v-loading="loading" :data="remarkList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="备注" align="center" width="400" prop="adminRemark"/>
        <el-table-column label="添加时间" align="center" width="150" prop="createTime" />
        <el-table-column label="创建人" align="center" prop="createBy" />
        <!-- <el-table-column label="操作" align="center" prop="adminRemark" >
          <template slot-scope="scope">
            <div @click="remarkDelete(scope.row)" class="colorMarking">删除</div>
          </template>
        </el-table-column> -->
      </el-table>
      <el-input type="textarea" v-model="adminRemark" placeholder="请输入备注" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarkSubmit">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
  <script>
  import { jishiList,areaList,workableEdit,robotFlagEdit,deleteOssFileByFileName,jishiAdd,jishiEdit,detailsJishi,
    jishiDel,projectsList,projectsEdit, detailsRealJishi, jishiEditReal, detailsBankJishi, jishiEditBank,jishiEditFuwuNum, jishiRemarkAdd, jishiRemarkList, jishiRemarkDelete} from "@/api/jishiManage/jishi";
  import {queryGodCode} from "@/api/common/common"
  import { getToken } from '@/utils/auth'
  export default {
    name: "Knowledge",
    components: {
    },
    data() {
      const validateworkImg = (rule, value, callback) => {
        if (!this.workImgurlArray || this.workImgurlArray.length < 1){
          callback(new Error('请上传工作照图片'))
        }else if(this.workImgurlArray.length > 1){
          callback(new Error('工作照上传不能超过1张'))
        }else{
          callback()
        }
      }
      const validateliveImg = (rule, value, callback) => {
        if (!this.liveImgurlArray || this.liveImgurlArray.length < 1){
          callback(new Error('请上传生活照图片'))
        }else if(this.liveImgurlArray.length > 6){
          callback(new Error('生活照上传不能超过6张'))
        }else{
          callback()
        }
      }
      const validateIdNumberFImg = (rule, value, callback) => {
        if (!this.idNumberPicF || this.idNumberPicF.length < 1){
          callback(new Error('请上传身份证正面图片'))
        }else if(this.liveImgurlArray.length > 1){
          callback(new Error('身份证正面上传不能超过1张'))
        }else{
          callback()
        } 
      }
      const validateIdNumberBImg = (rule, value, callback) => {
        if (!this.idNumberPicB || this.idNumberPicB.length < 1){
          callback(new Error('请上传身份证反面图片'))
        }else if(this.liveImgurlArray.length > 1){
          callback(new Error('身份证反面上传不能超过1张'))
        }else{
          callback()
        }
      }
      const validateLimitDate = (rule, value, callback) => {
        if (!this.idStartDate && !this.idLimitDate){
          callback(new Error('请选择身份证有效期'))
        }else{
          callback()
        }
      }
      return {
        projectUserName:'',
        projectShow:false,
        projectlist:[],
        activeName: "first",
        dialogImageUrl: '',
        dialogVisible: false,
        headers: {
          'Authorization': 'Bearer ' + getToken()
        },
        uploadURL: this.$store.state.user.uploadURL + '/oss/uploadFile2OSS',
        dir: {
          "dirData": "dcdj/image"
        },
        sfdir: {
          "dirData": "knowledgeBase/image"
        },
        replaceUrl: this.$store.state.user.replaceUrl,
        picShow:false,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 表格数据
        tabList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        realOpen:false,
        bankOpen:false,
        //简介弹窗
        introduceOpen:false,
        companyTypeOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          nickName:null,
          phonenumber:null,
          birthdayData:null,
          sex:null,
          areaName:null,
        },
        form:{},
        realform:{},
        bankform:{},
        rules:{
          realName:[
            { required: true, message: "技师姓名不能为空", trigger: "blur" }
          ],
          nickName:[
            { required: true, message: "技师昵称不能为空", trigger: "blur" }
          ],
          phonenumber:[
            { required: true, message: "技师电话不能为空", trigger: "blur" }
          ],
          birthday:[
            { required: true, message: "技师出生年月日不能为空", trigger: "change" }
          ],
          sex:[
            { required: true, message: "技师性别不能为空", trigger: "change" }
          ],
          areaId:[
            { required: true, message: "所在城市不能为空", trigger: "change" }
          ],
          addr:[
            { required: true, message: "所在位置不能为空", trigger: "blur" }
          ],
          intro:[
            { required: true, message: "技师简介不能为空", trigger: "change" }
          ],
          workImg: [
            { required: true, validator: validateworkImg, trigger: "change" }
          ],
          liveImg: [
            { required: true, validator: validateliveImg, trigger: "change" }
          ],
        },
        realRules:{
          idNumber:[
            { required: true, message: "身份证号不能为空", trigger: "blur" }
          ],
          limitDate:[
            { required: true, validator: validateLimitDate, trigger: "blur" }
          ],
          idNumberPicF: [
            { required: true, validator: validateIdNumberFImg, trigger: "change" }
          ],
          idNumberPicB: [
            { required: true, validator: validateIdNumberBImg, trigger: "change" }
          ],
        },
        bankRules:{
          personName:[
            { required: true, message: "姓名不能为空", trigger: "blur" }
          ],
          openPhoneNumber:[
            { required: true, message: "开户行手机号不能为空", trigger: "blur" }
          ],
          idNumber:[
            { required: true, message: "身份证号不能为空", trigger: "blur" }
          ],
          bankName:[
            { required: true, message: "身份证号不能为空", trigger: "blur" }
          ],
          cardNumber:[
            { required: true, message: "银行名称不能为空", trigger: "blur" }
          ],
          branchBank:[
            { required: true, message: "银行卡号不能为空", trigger: "blur" }
          ],
        },
        genderArray:[],//技师性别
        srcList:[],//图片集合
        followInfo:'',//技师简介
        workableArray:[],
        areaNameArray:[],
        sexArray:[],
        // birthday:'',
        createTime:'',
        workImgurlArray:[],//工作照
        liveImgurlArray:[],//生活照
        idNumberPicF:[],//工作照
        idNumberPicB:[],//生活照
        birthdayData:'',
        birthday:'',
        birthdayEnd:'',
        selectCity:'',
        selectAddr: null,
        userName:'',
        idNumberDate:null,
        idStartDate: '', // 开始日期
        idLimitDate: '', // 结束日期
        startPickerOptions: {},
        endPickerOptions: {},
        remarkShow: false,
        adminRemark: '',
        remarkList:[],
      };
    },
    created() {
      this.getList();
      this.cityList()
      //在字典查询-是否可服务
      this.getDicts("is_workable").then(response => {
        this.workableArray = response.data;
      });
      //性别
      this.getDicts("sys_user_sex").then(response => {
        this.sexArray = response.data;
      });
    },
    methods: {
      stringDateToTimestamp(stringDate) {
        return Date.parse(new Date(stringDate));
      },
      startDateFocus() {
        this.idLimitDate = ''
        let idLimitDate = this.idLimitDate;
        if (!idLimitDate) return;
        let that = this;
        that.startPickerOptions = {
          disabledDate(time) {
            return time.getTime() >= that.stringDateToTimestamp(idLimitDate) - 1 * 24 * 3600 * 1000;
          },
        };
      },
      endDateFocus() {
        let idStartDate = this.idStartDate;
        if (!idStartDate) return;
        let that = this;
        that.endPickerOptions = {
          disabledDate(time) {
            return time.getTime() <= that.stringDateToTimestamp(idStartDate);
          },
        };
      },
      birthdayDataChange() {
        this.birthday = this.birthdayData[0] 
        this.birthdayEnd = this.birthdayData[1]
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.birthday = this.birthday;
        this.queryParams.birthdayEnd = this.birthdayEnd;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.birthdayData = ''
        this.birthday = ''
        this.birthdayEnd = ''
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.userName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      reset(){
        this.form={}
        this.workImgurlArray =[];
        this.liveImgurlArray =[];
        this.selectCity='';
      },
      /** 查询产品入库列表 */
      getList() {
        this.loading = true;
        jishiList(this.queryParams).then(response => {
          this.tabList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      cityList(){
        areaList().then(response => {
          this.areaNameArray = response.data;
        });
      },
      sexChange(row){
        return this.selectDictLabel(this.sexArray, row.sex);
      },
      imgSuccess(response, file, fileList) {
        if (200 != response.code){
          this.$message.error(response.msg);
          //从文件列表删除
          // this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.indexOf(file), 1)
        }else{
          let imgName = {
            cover: true,
            name: '',
            url: ''
          };
          var flieArr = file.name.split('.')
          var suffix = flieArr[flieArr.length - 1]
          var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'PNG', 'JPG', 'JPEG', 'BMP', 'GIF',]
          var result = imglist.some(function (item) {
            return item == suffix
          });
          if (result) {
            imgName.type = 1;
          }
          if (suffix == 'mp4' || suffix == 'MP4') {
            imgName.type = 2;
          }
          imgName.name = file.name;
          imgName.url = response.data;
          this.workImgurlArray.push(imgName);
        }  
      },
      imgRemove(file, fileList) {
        let oldImg = file.url;
        let newImg = oldImg.replace(this.$store.state.user.replaceUrl, '');
        deleteOssFileByFileName({
          fileName: newImg
        }).then(res => {
          this.workImgurlArray = fileList;
        });
      },
      handleBeforeRemove(file, fileList){
        return this.$confirm('确定删除当前图片？, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
      },
      beforeUploadClick(file){
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true;
      },
      liveImgurlSuccess(response, file, fileList) {
        if (200 != response.code){
          this.$message.error(response.msg);
          //从文件列表删除
          // this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.indexOf(file), 1)
        }else{
          let imgName = {
            cover: true,
            // name: '',
            url: ''
          };
          var flieArr = file.name.split('.')
          var suffix = flieArr[flieArr.length - 1]
          var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'PNG', 'JPG', 'JPEG', 'BMP', 'GIF',]
          var result = imglist.some(function (item) {
            return item == suffix
          });
          if (result) {
            imgName.type = 1;
          }
          if (suffix == 'mp4' || suffix == 'MP4') {
            imgName.type = 2;
          }
          imgName.name = file.name;
          imgName.url = response.data;
          this.liveImgurlArray.push(imgName);
        }  
    },
    liveImgRemove(file, fileList) {
        let oldImg = file.url;
        let newImg = oldImg.replace(this.$store.state.user.replaceUrl, '');
        deleteOssFileByFileName({
          fileName: newImg
        }).then(res => {
          this.liveImgurlArray = fileList;
        });
      },
      liveImgurlRemove(file, fileList){
        return this.$confirm('确定删除当前图片？, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
      },
      liveImgurlClick(file){
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      liveImgurlPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true;
      },
      //查看技师简介
      introClick(row){
        this.followInfo = row.intro;
        this.introduceOpen = true
      },
      //查看技师照片
      liveImgClick(row){
        this.srcList = [];
        if (row.workImgurl) {
            this.srcList=this.srcList.concat(row.workImgurl.split(','));
        }
        if (row.liveImgurl) {
            this.srcList=this.srcList.concat(row.liveImgurl.split(','));
        }
        this.picShow = true;
      },
      //新增
      handleAdd(){
        this.reset()
        this.title = '新增'
        this.open = true
      },
      //修改
      handleEdit(row){
        console.log(this.ids)
        this.reset()
        const userName = row.userName || this.ids;
        detailsJishi(userName).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改";
          if (response.data.workImgurl) {
            this.workImgurlArray = response.data.workImgurl.split(',').map(item => {return{url:item}});
          }
          if (response.data.liveImgurl) {
            this.liveImgurlArray = response.data.liveImgurl.split(',').map(item => {return{url:item}});
          }
          this.selectCity = response.data.areaName;
        });
      },
      //删除
      handleDel(row){
        const userNames = row.userName || this.ids;
        this.$confirm('确认删除技师信息', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return jishiDel(userNames);
        }).then(() => {
          this.$message({message: '删除成功',type: 'success'});
          this.getList();
        })
      },
      //列表操作
      changeWorkable(val, item) {
        
        let text = item.workable === "1" ? '继续' : '暂停' ;
        this.$modal.confirm('确认' + text + '技师服务？').then(function() {
          return workableEdit({
              userName: item.userName,
              workable:val
            });
        }).then(() => {
          this.$message({message: '操作成功',type: 'success'});
        }).catch(function() {
          item.workable = item.workable === "0" ? "1" : "0";
        });
      },
      changeRobotFlag(val, item) {
        let text = item.robotFlag == "1" ? '打开' : '关闭' ;
        this.$modal.confirm('确认' + text + '技师全忙？').then(function() {
          return robotFlagEdit({
              userName: item.userName,
              robotFlag:val
            });
        }).then(() => {
          this.$message({message: '操作成功',type: 'success'});
        }).catch(function() {
          item.robotFlag = item.robotFlag === "0" ? "1" : "0";
        });
      },
      cancel(){
        this.open = false
        this.introduceOpen = false
        this.picShow = false
        this.projectShow = false
        this.realOpen = false
        this.bankOpen = false
        this.remarkShow = false
      },
      //项目服务列表
      projectClick(row){
        this.projectUserName = row.userName
        this.projectList(row.userName)
        this.projectShow = true
      },
      projectList(userName){
        projectsList(userName).then(response => {
          this.projectlist = response.data;
        });
      },
      //修改项目列表是否可用
      changeProkject(val, item) {
        // projectsEdit({userName:this.projectUserName,projectId: item.id}).then(response => {
        //         this.$message({message: '修改成功',type: 'success'});
        //         // this.projectList(this.projectUserName)
        //       });
        let that = this
        let text = item.serviceAble === "1" ? '继续' : '暂停' ;
        this.$modal.confirm('确认' + text + '项目服务？').then(function() {
          return projectsEdit({
            userName:that.projectUserName,
            projectId: item.id,
            });
        }).then(() => {
          that.$message({message: '操作成功',type: 'success'});
          that.projectList(that.projectUserName)
        }).catch(function() {
          item.serviceAble = item.serviceAble === "0" ? "1" : "0";
        });
      },
      submit(){
        let workImgArray = this.workImgurlArray.map(item => {
          return { url:item.url};
        });
        let liveImgArray = this.liveImgurlArray.map(item => {
          return { url:item.url};
        });
        // this.form.workImgurl = JSON.stringify(workImgArray);
        this.form.workImgurl = workImgArray.map(item => item.url).join(',');
        this.form.liveImgurl = liveImgArray.map(item => item.url).join(',');
        if (this.selectAddr){
          this.form.addr = this.selectAddr.formatted_address;
          var locations = this.selectAddr.location.split(",");
          this.form.longitude = locations[0];
          this.form.latitude = locations[1];
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.userName != null) {
              jishiEdit(this.form).then(response => {
                this.$message({message: '修改成功',type: 'success'});
                this.open = false;
                this.getList();
              });
            } else {
              console.log(this.form)
              if (!this.form.longitude || !this.form.latitude){
                this.$message.error('请选择位置');
              }else{
                jishiAdd(this.form).then(response => {
                  if (response.msg == "操作成功") {
                    this.$message({message: '新增成功',type: 'success'});
                    this.open = false;
                    this.getList()
                  }
                });
              }
            }
          }
        });
      },
      handleCityChange(item){
        var results = this.areaNameArray.filter(el =>{
          return el.id == item
        })
        this.selectCity = results[0].areaName;
      },
      querySearch(queryString, cb) {
        queryGodCode({addr:queryString, city:this.selectCity}).then(response => {
          cb(response.data);
        });
      },
      handleAddrSelect(item){
        this.selectAddr = item;
      },
      // 查询实名认证
      handleEditReal(row){
        const userName = row.userName;
        this.userName = userName;
        this.idNumberDate = []
        this.realform = {};
        detailsRealJishi(userName).then(response => {
          this.realform = response.data;
          this.realOpen = true;
          if (response.data.idNumberPic) {
            var array = JSON.parse(response.data.idNumberPic);
            this.idNumberPicF = [array[0]];
            this.idNumberPicB = [array[1]];
          }else{
            this.idNumberPicF=[];
            this.idNumberPicB=[];
          }
          this.idStartDate = response.data.idStartDate
          this.idLimitDate = response.data.idLimitDate
          // if(response.data.idStartDate){
          //   this.idNumberDate.push(response.data.idStartDate);
          // }
          // if(response.data.idLimitDate){
          //   this.idNumberDate.push(response.data.idLimitDate);
          // }
        });
      },
      // 上传身份证正面
      realImgFSuccess(response, file, fileList) {
        if (200 != response.code){
          this.$message.error(response.msg);
          //从文件列表删除
          // this.$refs.realUploadF.uploadFiles.splice(this.$refs.realUploadF.uploadFiles.indexOf(file), 1)
        }else{
          let imgName = {
            cover: true,
            name: '',
            url: ''
          };
          var flieArr = file.name.split('.')
          var suffix = flieArr[flieArr.length - 1]
          var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'PNG', 'JPG', 'JPEG', 'BMP', 'GIF',]
          var result = imglist.some(function (item) {
            return item == suffix
          });
          if (result) {
            imgName.type = 1;
          }
          if (suffix == 'mp4' || suffix == 'MP4') {
            imgName.type = 2;
          }
          imgName.name = file.name;
          imgName.url = response.data;
          this.idNumberPicF.push(imgName);
        }  
      },
      // 删除身份证正面图
      realFImgRemove(file, fileList) {
        let oldImg = file.url;
        let newImg = oldImg.replace(this.$store.state.user.replaceUrl, '');
        deleteOssFileByFileName({
          fileName: newImg
        }).then(res => {
          this.idNumberPicF = fileList;
        });
      },
      // 上传身份证反面
      realImgBSuccess(response, file, fileList) {
        if (200 != response.code){
          this.$message.error(response.msg);
          //从文件列表删除
          // this.$refs.realUploadB.uploadFiles.splice(this.$refs.realUploadB.uploadFiles.indexOf(file), 1)
        }else{
          let imgName = {
            cover: true,
            name: '',
            url: ''
          };
          var flieArr = file.name.split('.')
          var suffix = flieArr[flieArr.length - 1]
          var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'PNG', 'JPG', 'JPEG', 'BMP', 'GIF',]
          var result = imglist.some(function (item) {
            return item == suffix
          });
          if (result) {
            imgName.type = 1;
          }
          if (suffix == 'mp4' || suffix == 'MP4') {
            imgName.type = 2;
          }
          imgName.name = file.name;
          imgName.url = response.data;
          this.idNumberPicB.push(imgName);
        }  
      },
      // 删除身份证反面图
      realBImgRemove(file, fileList) {
        let oldImg = file.url;
        let newImg = oldImg.replace(this.$store.state.user.replaceUrl, '');
        deleteOssFileByFileName({
          fileName: newImg
        }).then(res => {
          this.idNumberPicB = fileList;
        });
      },
      // 实名认证信息提交
      realSubmit(){
        let idNumberPic = [];
        let fArray = this.idNumberPicF.map(item => {
          return { url:item.url};
        });
        let bArray = this.idNumberPicB.map(item => {
          return { url:item.url};
        });
        idNumberPic.push(fArray[0]);
        idNumberPic.push(bArray[0]);
        this.realform.idNumberPic = JSON.stringify(idNumberPic);
        this.realform.idNumberPic = JSON.stringify(idNumberPic);
        this.realform.userName = this.userName;
        this.realform.idStartDate = this.idStartDate;
        this.realform.idLimitDate = this.idLimitDate;
        // if(this.idNumberDate && this.idNumberDate.length > 1){
        //   this.realform.idStartDate = this.idNumberDate[0];
        //   this.realform.idLimitDate = this.idNumberDate[1];
        // }
        this.$refs["realform"].validate(valid => {
          if (valid) {
            jishiEditReal(this.realform).then(response => {
              this.$message({message: '修改成功',type: 'success'});
              this.realOpen = false;
            });
          }
        });
      },
      // 查询银行卡信息
      handleEditBank(row){
        const userName = row.userName;
        this.userName = userName;
        this.bankform = {};
        detailsBankJishi(userName).then(response => {
          if (response.data){
            this.bankform = response.data;
          }
          this.bankOpen = true;
        });
      },
      // 提交银行卡信息
      bankSubmit(){
        this.bankform.userName = this.userName;
        this.$refs["bankform"].validate(valid => {
          if (valid) {
            jishiEditBank(this.bankform).then(response => {
              this.$message({message: '修改成功',type: 'success'});
              this.bankOpen = false;
            });
          }
        });
      },
      fuwuNumInput(e, index){
        let value = e.replace(/[^\d]/g,''); // 只能输入数字
        value = value.replace(/^0+(\d)/,"$1"); // 第一位0开头，0后面为数字
        value = value.replace(/(\d{15})\d*/,'$1') // 最多保留15位整数 
        this.tabList[index].fuwuNum = value
      },

      fuwuNumChange(e, index, row){
        let value = e.replace(/[^\d]/g,''); // 只能输入数字
        value = value.replace(/^0+(\d)/,"$1"); // 第一位0开头，0后面为数字
        value = value.replace(/(\d{15})\d*/,'$1') // 最多保留15位整数 
        jishiEditFuwuNum({userName:row.userName, fuwuNum:row.fuwuNum}).then(response => {
              this.$message({message: '修改成功',type: 'success'});
              this.tabList[index].fuwuNum = value;
            });
      },
      //技师备注
      remarkClick(row){
        this.userName = row.userName;
        this.remarkList = [];
        this.adminRemark = '';
        this.getJishiRemarkList();
        this.remarkShow = true
      },
      getJishiRemarkList (){
        jishiRemarkList({userName: this.userName}).then(response => {
          this.remarkList = response.data;
          
        });
      },
      //技师备注提交
      remarkSubmit(){
        jishiRemarkAdd({userName:this.userName, remark:this.adminRemark}).then(response => {
              this.$message({message: '添加成功',type: 'success'});
              this.getJishiRemarkList();
              this.adminRemark = '';
            });
      },
      remarkDelete(row){
        jishiRemarkDelete(row.id).then(response => {
              this.$message({message: '删除成功',type: 'success'});
              this.getJishiRemarkList();
            });
      }

    }
  };
  </script>
  <style>
  .el-select.intWidth{
    width: 230px;
  }
  .el-select.intMaxWidth{
    width: 575px;
  }
  .dialog-footer{
    text-align: center;
  }
  .colorMarking{
    color:#1890ff;
    cursor: pointer;
  }
  .block{
    padding: 10px;
    min-height: 100px;
    border:1px solid #999;
    border-radius: 6px;
  }
  .quesEditBtn{
    display: block;
    text-align: center;
  }
  .el-date-editor.el-input.maxWidth{
    width: 228px;
  }
  .popuplist{
    margin-top:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background: #F3F7F8;
    border-radius: 6px;
  }
  .popuplist .left{
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
  }
  .popuplist .left img{
    width: 100px;
    height: 100px;
  }
  .popuplist .right{
    width: 70%;
  }
  .popuplist .right .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color:#333;
    font-weight: 600;
  }
  .popuplist .right .center{
    margin: 10px 0 14px;
    display: flex;
    justify-content: left;
    align-content: center;
    font-size: 14px;
    color:#999;
    
  }
  .popuplist .right .center .line{
    margin: 0 5px;
  }
  .popuplist .right .money{
    font-size: 12px;
    color:#FF0000;
  }
  .popuplist .right .money span{
    font-size: 16px;
  }
  </style>
    